<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    用户名：<input type="text" value="张三"> <br>
    密码： <input type="password" value="666"> <br>
    性别： <input type="radio" name="sex" id="F" value="男">男
    <input type="radio" name="sex" id="M" value="女" checked>女 <br>
    爱好：
    唱歌 <input type="checkbox" name="hobby" id="" value="唱歌">
    跳舞 <input type="checkbox" name="hobby" id="" value="跳舞" checked><br>
    班级：
    <select name="classname" id="">
        <option value="1班">1班</option>
        <option value="2班">2班</option>
        <option value="3班">3班</option>
        <option value="4班">4班</option>
    </select> <br>
    <button>点击</button>
    <script>
        // 1. 文本输入框 值和类型
        const ipt = document.querySelector('input')
        console.log(ipt.value);

        // 2. 密码输入框
        document.querySelector('[type="password"]').type = 'button'
        // 3. 单选框     
        // 3.1 checked属性 修改选中状态
        document.querySelectorAll('[type="radio"]')[0].checked = true;
        // 3.2 那如何获取选中状态的对象

        // 4. 复选框
        const boxs = document.querySelectorAll('[type="checkbox"]')
        for (let i = 0; i < boxs.length; i++) {
            boxs[i].checked = true

        }

        // 5. 下拉框
        document.querySelectorAll('option')[2].selected = true

        // 6. 按钮 禁用与启用
        document.querySelector('button').disabled = false
    </script>
</body>

</html>